<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=993594" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">本地货币</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">交易所</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">复制</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">联系我们</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">钱包_高亮</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">切换</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">热门应用</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">钱包_正常</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">下箭头</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">资料库</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">附件</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">打印</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">图层</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">资料</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">信息</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">文档</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">发现 浏览</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">指示</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">网络</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">文档库</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">监测</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">Shopping cart</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">005-poll</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">003-email</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">007-pay</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">008-flag</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">006-results</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">009-flag-1</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">013-user-1</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">016-check</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">011-add-user</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">014-businessman</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">019-menu-1</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">015-followers</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">022-edit</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">024-plus</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">025-minus</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">026-home</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">028-search</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">031-power-button</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">030-log-in</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">032-more</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">034-sunrise</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">037-moon</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">038-up-arrow</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">039-down-arrow</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">040-right-arrow-1</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">027-settings</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">043-down-arrow-1</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">045-left-arrow</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">044-chevron</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">049-expand</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">048-refresh</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">047-random</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">051-target</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">053-cloud</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">050-minimize</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">055-cloud-computing-</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">054-cloud-computing</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">058-play</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">059-stop</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">057-right-arrow</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">060-pause</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">070-document</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">068-wall-clock</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">069-file</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">071-abacus</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">073-writing</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">076-exam</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">077-timetable</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">072-invoice</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">082-chat-1</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">081-contract</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">083-shield</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">084-folder</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">085-internet-1</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">086-internet</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">093-email-4</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">094-email-5</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">092-spam-1</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">097-key</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">098-bar-chart</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">100-connection</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">099-link</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">103-clip</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">许可证</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">审核</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">拍照</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">值班</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-bendihuobi"></span>
            <div class="name">
              本地货币
            </div>
            <div class="code-name">.icon-bendihuobi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui1"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-erweima"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-erweima
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaoyisuo"></span>
            <div class="name">
              交易所
            </div>
            <div class="code-name">.icon-jiaoyisuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fuzhi"></span>
            <div class="name">
              复制
            </div>
            <div class="code-name">.icon-fuzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lianxiwomen"></span>
            <div class="name">
              联系我们
            </div>
            <div class="code-name">.icon-lianxiwomen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianbao_gaoliang"></span>
            <div class="name">
              钱包_高亮
            </div>
            <div class="code-name">.icon-qianbao_gaoliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiehuan"></span>
            <div class="name">
              切换
            </div>
            <div class="code-name">.icon-qiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remenyingyong"></span>
            <div class="name">
              热门应用
            </div>
            <div class="code-name">.icon-remenyingyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianbao_zhengchang"></span>
            <div class="name">
              钱包_正常
            </div>
            <div class="code-name">.icon-qianbao_zhengchang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiantou"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.icon-shangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiajiantou"></span>
            <div class="name">
              下箭头
            </div>
            <div class="code-name">.icon-xiajiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youjiantou"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-youjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuojiantou"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-zuojiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziliaoku"></span>
            <div class="name">
              资料库
            </div>
            <div class="code-name">.icon-ziliaoku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuju"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.icon-shuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fujian"></span>
            <div class="name">
              附件
            </div>
            <div class="code-name">.icon-fujian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dayin"></span>
            <div class="name">
              打印
            </div>
            <div class="code-name">.icon-dayin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tuceng"></span>
            <div class="name">
              图层
            </div>
            <div class="code-name">.icon-tuceng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ziliao"></span>
            <div class="name">
              资料
            </div>
            <div class="code-name">.icon-ziliao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinxi"></span>
            <div class="name">
              信息
            </div>
            <div class="code-name">.icon-xinxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu1"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendang"></span>
            <div class="name">
              文档
            </div>
            <div class="code-name">.icon-wendang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-faxianliulan"></span>
            <div class="name">
              发现 浏览
            </div>
            <div class="code-name">.icon-faxianliulan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhishi"></span>
            <div class="name">
              指示
            </div>
            <div class="code-name">.icon-zhishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wangluo"></span>
            <div class="name">
              网络
            </div>
            <div class="code-name">.icon-wangluo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wendangku"></span>
            <div class="name">
              文档库
            </div>
            <div class="code-name">.icon-wendangku
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiance"></span>
            <div class="name">
              监测
            </div>
            <div class="code-name">.icon-jiance
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Shoppingcart"></span>
            <div class="name">
              Shopping cart
            </div>
            <div class="code-name">.icon-Shoppingcart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--poll"></span>
            <div class="name">
              005-poll
            </div>
            <div class="code-name">.icon--poll
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--email"></span>
            <div class="name">
              003-email
            </div>
            <div class="code-name">.icon--email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--pay"></span>
            <div class="name">
              007-pay
            </div>
            <div class="code-name">.icon--pay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--flag"></span>
            <div class="name">
              008-flag
            </div>
            <div class="code-name">.icon--flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--results"></span>
            <div class="name">
              006-results
            </div>
            <div class="code-name">.icon--results
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--flag-"></span>
            <div class="name">
              009-flag-1
            </div>
            <div class="code-name">.icon--flag-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--user-"></span>
            <div class="name">
              013-user-1
            </div>
            <div class="code-name">.icon--user-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--check"></span>
            <div class="name">
              016-check
            </div>
            <div class="code-name">.icon--check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--add-user"></span>
            <div class="name">
              011-add-user
            </div>
            <div class="code-name">.icon--add-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--businessman"></span>
            <div class="name">
              014-businessman
            </div>
            <div class="code-name">.icon--businessman
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--menu-"></span>
            <div class="name">
              019-menu-1
            </div>
            <div class="code-name">.icon--menu-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--followers"></span>
            <div class="name">
              015-followers
            </div>
            <div class="code-name">.icon--followers
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--edit"></span>
            <div class="name">
              022-edit
            </div>
            <div class="code-name">.icon--edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--plus"></span>
            <div class="name">
              024-plus
            </div>
            <div class="code-name">.icon--plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--minus"></span>
            <div class="name">
              025-minus
            </div>
            <div class="code-name">.icon--minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--home"></span>
            <div class="name">
              026-home
            </div>
            <div class="code-name">.icon--home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--search"></span>
            <div class="name">
              028-search
            </div>
            <div class="code-name">.icon--search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--power-button"></span>
            <div class="name">
              031-power-button
            </div>
            <div class="code-name">.icon--power-button
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--log-in"></span>
            <div class="name">
              030-log-in
            </div>
            <div class="code-name">.icon--log-in
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--more"></span>
            <div class="name">
              032-more
            </div>
            <div class="code-name">.icon--more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--sunrise"></span>
            <div class="name">
              034-sunrise
            </div>
            <div class="code-name">.icon--sunrise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--moon"></span>
            <div class="name">
              037-moon
            </div>
            <div class="code-name">.icon--moon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--up-arrow"></span>
            <div class="name">
              038-up-arrow
            </div>
            <div class="code-name">.icon--up-arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--down-arrow"></span>
            <div class="name">
              039-down-arrow
            </div>
            <div class="code-name">.icon--down-arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--right-arrow-"></span>
            <div class="name">
              040-right-arrow-1
            </div>
            <div class="code-name">.icon--right-arrow-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--settings"></span>
            <div class="name">
              027-settings
            </div>
            <div class="code-name">.icon--settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--down-arrow-"></span>
            <div class="name">
              043-down-arrow-1
            </div>
            <div class="code-name">.icon--down-arrow-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--left-arrow"></span>
            <div class="name">
              045-left-arrow
            </div>
            <div class="code-name">.icon--left-arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--chevron"></span>
            <div class="name">
              044-chevron
            </div>
            <div class="code-name">.icon--chevron
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--expand"></span>
            <div class="name">
              049-expand
            </div>
            <div class="code-name">.icon--expand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--refresh"></span>
            <div class="name">
              048-refresh
            </div>
            <div class="code-name">.icon--refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--random"></span>
            <div class="name">
              047-random
            </div>
            <div class="code-name">.icon--random
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--target"></span>
            <div class="name">
              051-target
            </div>
            <div class="code-name">.icon--target
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--cloud"></span>
            <div class="name">
              053-cloud
            </div>
            <div class="code-name">.icon--cloud
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--minimize"></span>
            <div class="name">
              050-minimize
            </div>
            <div class="code-name">.icon--minimize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--cloud-computing-"></span>
            <div class="name">
              055-cloud-computing-
            </div>
            <div class="code-name">.icon--cloud-computing-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--cloud-computing"></span>
            <div class="name">
              054-cloud-computing
            </div>
            <div class="code-name">.icon--cloud-computing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--play"></span>
            <div class="name">
              058-play
            </div>
            <div class="code-name">.icon--play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--stop"></span>
            <div class="name">
              059-stop
            </div>
            <div class="code-name">.icon--stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--right-arrow"></span>
            <div class="name">
              057-right-arrow
            </div>
            <div class="code-name">.icon--right-arrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--pause"></span>
            <div class="name">
              060-pause
            </div>
            <div class="code-name">.icon--pause
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--document"></span>
            <div class="name">
              070-document
            </div>
            <div class="code-name">.icon--document
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--wall-clock"></span>
            <div class="name">
              068-wall-clock
            </div>
            <div class="code-name">.icon--wall-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--file"></span>
            <div class="name">
              069-file
            </div>
            <div class="code-name">.icon--file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--abacus"></span>
            <div class="name">
              071-abacus
            </div>
            <div class="code-name">.icon--abacus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--writing"></span>
            <div class="name">
              073-writing
            </div>
            <div class="code-name">.icon--writing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--exam"></span>
            <div class="name">
              076-exam
            </div>
            <div class="code-name">.icon--exam
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--timetable"></span>
            <div class="name">
              077-timetable
            </div>
            <div class="code-name">.icon--timetable
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--invoice"></span>
            <div class="name">
              072-invoice
            </div>
            <div class="code-name">.icon--invoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--chat-"></span>
            <div class="name">
              082-chat-1
            </div>
            <div class="code-name">.icon--chat-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--contract"></span>
            <div class="name">
              081-contract
            </div>
            <div class="code-name">.icon--contract
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--shield"></span>
            <div class="name">
              083-shield
            </div>
            <div class="code-name">.icon--shield
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--folder"></span>
            <div class="name">
              084-folder
            </div>
            <div class="code-name">.icon--folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--internet-"></span>
            <div class="name">
              085-internet-1
            </div>
            <div class="code-name">.icon--internet-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--internet"></span>
            <div class="name">
              086-internet
            </div>
            <div class="code-name">.icon--internet
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--email-"></span>
            <div class="name">
              093-email-4
            </div>
            <div class="code-name">.icon--email-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--email-1"></span>
            <div class="name">
              094-email-5
            </div>
            <div class="code-name">.icon--email-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--spam-"></span>
            <div class="name">
              092-spam-1
            </div>
            <div class="code-name">.icon--spam-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--key"></span>
            <div class="name">
              097-key
            </div>
            <div class="code-name">.icon--key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--bar-chart"></span>
            <div class="name">
              098-bar-chart
            </div>
            <div class="code-name">.icon--bar-chart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--connection"></span>
            <div class="name">
              100-connection
            </div>
            <div class="code-name">.icon--connection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--link"></span>
            <div class="name">
              099-link
            </div>
            <div class="code-name">.icon--link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon--clip"></span>
            <div class="name">
              103-clip
            </div>
            <div class="code-name">.icon--clip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xukezheng"></span>
            <div class="name">
              许可证
            </div>
            <div class="code-name">.icon-xukezheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenhe"></span>
            <div class="name">
              审核
            </div>
            <div class="code-name">.icon-shenhe
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-paizhao"></span>
            <div class="name">
              拍照
            </div>
            <div class="code-name">.icon-paizhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhiban"></span>
            <div class="name">
              值班
            </div>
            <div class="code-name">.icon-zhiban
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bendihuobi"></use>
                </svg>
                <div class="name">本地货币</div>
                <div class="code-name">#icon-bendihuobi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui1"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-erweima"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-erweima</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaoyisuo"></use>
                </svg>
                <div class="name">交易所</div>
                <div class="code-name">#icon-jiaoyisuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fuzhi"></use>
                </svg>
                <div class="name">复制</div>
                <div class="code-name">#icon-fuzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lianxiwomen"></use>
                </svg>
                <div class="name">联系我们</div>
                <div class="code-name">#icon-lianxiwomen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianbao_gaoliang"></use>
                </svg>
                <div class="name">钱包_高亮</div>
                <div class="code-name">#icon-qianbao_gaoliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiehuan"></use>
                </svg>
                <div class="name">切换</div>
                <div class="code-name">#icon-qiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remenyingyong"></use>
                </svg>
                <div class="name">热门应用</div>
                <div class="code-name">#icon-remenyingyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianbao_zhengchang"></use>
                </svg>
                <div class="name">钱包_正常</div>
                <div class="code-name">#icon-qianbao_zhengchang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiantou"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#icon-shangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiajiantou"></use>
                </svg>
                <div class="name">下箭头</div>
                <div class="code-name">#icon-xiajiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youjiantou"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-youjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-zuojiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziliaoku"></use>
                </svg>
                <div class="name">资料库</div>
                <div class="code-name">#icon-ziliaoku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuju"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#icon-shuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fujian"></use>
                </svg>
                <div class="name">附件</div>
                <div class="code-name">#icon-fujian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dayin"></use>
                </svg>
                <div class="name">打印</div>
                <div class="code-name">#icon-dayin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuceng"></use>
                </svg>
                <div class="name">图层</div>
                <div class="code-name">#icon-tuceng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ziliao"></use>
                </svg>
                <div class="name">资料</div>
                <div class="code-name">#icon-ziliao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinxi"></use>
                </svg>
                <div class="name">信息</div>
                <div class="code-name">#icon-xinxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendang"></use>
                </svg>
                <div class="name">文档</div>
                <div class="code-name">#icon-wendang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-faxianliulan"></use>
                </svg>
                <div class="name">发现 浏览</div>
                <div class="code-name">#icon-faxianliulan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhishi"></use>
                </svg>
                <div class="name">指示</div>
                <div class="code-name">#icon-zhishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wangluo"></use>
                </svg>
                <div class="name">网络</div>
                <div class="code-name">#icon-wangluo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wendangku"></use>
                </svg>
                <div class="name">文档库</div>
                <div class="code-name">#icon-wendangku</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiance"></use>
                </svg>
                <div class="name">监测</div>
                <div class="code-name">#icon-jiance</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Shoppingcart"></use>
                </svg>
                <div class="name">Shopping cart</div>
                <div class="code-name">#icon-Shoppingcart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--poll"></use>
                </svg>
                <div class="name">005-poll</div>
                <div class="code-name">#icon--poll</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--email"></use>
                </svg>
                <div class="name">003-email</div>
                <div class="code-name">#icon--email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--pay"></use>
                </svg>
                <div class="name">007-pay</div>
                <div class="code-name">#icon--pay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--flag"></use>
                </svg>
                <div class="name">008-flag</div>
                <div class="code-name">#icon--flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--results"></use>
                </svg>
                <div class="name">006-results</div>
                <div class="code-name">#icon--results</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--flag-"></use>
                </svg>
                <div class="name">009-flag-1</div>
                <div class="code-name">#icon--flag-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--user-"></use>
                </svg>
                <div class="name">013-user-1</div>
                <div class="code-name">#icon--user-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--check"></use>
                </svg>
                <div class="name">016-check</div>
                <div class="code-name">#icon--check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--add-user"></use>
                </svg>
                <div class="name">011-add-user</div>
                <div class="code-name">#icon--add-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--businessman"></use>
                </svg>
                <div class="name">014-businessman</div>
                <div class="code-name">#icon--businessman</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--menu-"></use>
                </svg>
                <div class="name">019-menu-1</div>
                <div class="code-name">#icon--menu-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--followers"></use>
                </svg>
                <div class="name">015-followers</div>
                <div class="code-name">#icon--followers</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--edit"></use>
                </svg>
                <div class="name">022-edit</div>
                <div class="code-name">#icon--edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--plus"></use>
                </svg>
                <div class="name">024-plus</div>
                <div class="code-name">#icon--plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--minus"></use>
                </svg>
                <div class="name">025-minus</div>
                <div class="code-name">#icon--minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--home"></use>
                </svg>
                <div class="name">026-home</div>
                <div class="code-name">#icon--home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--search"></use>
                </svg>
                <div class="name">028-search</div>
                <div class="code-name">#icon--search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--power-button"></use>
                </svg>
                <div class="name">031-power-button</div>
                <div class="code-name">#icon--power-button</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--log-in"></use>
                </svg>
                <div class="name">030-log-in</div>
                <div class="code-name">#icon--log-in</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--more"></use>
                </svg>
                <div class="name">032-more</div>
                <div class="code-name">#icon--more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--sunrise"></use>
                </svg>
                <div class="name">034-sunrise</div>
                <div class="code-name">#icon--sunrise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--moon"></use>
                </svg>
                <div class="name">037-moon</div>
                <div class="code-name">#icon--moon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--up-arrow"></use>
                </svg>
                <div class="name">038-up-arrow</div>
                <div class="code-name">#icon--up-arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--down-arrow"></use>
                </svg>
                <div class="name">039-down-arrow</div>
                <div class="code-name">#icon--down-arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--right-arrow-"></use>
                </svg>
                <div class="name">040-right-arrow-1</div>
                <div class="code-name">#icon--right-arrow-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--settings"></use>
                </svg>
                <div class="name">027-settings</div>
                <div class="code-name">#icon--settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--down-arrow-"></use>
                </svg>
                <div class="name">043-down-arrow-1</div>
                <div class="code-name">#icon--down-arrow-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--left-arrow"></use>
                </svg>
                <div class="name">045-left-arrow</div>
                <div class="code-name">#icon--left-arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--chevron"></use>
                </svg>
                <div class="name">044-chevron</div>
                <div class="code-name">#icon--chevron</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--expand"></use>
                </svg>
                <div class="name">049-expand</div>
                <div class="code-name">#icon--expand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--refresh"></use>
                </svg>
                <div class="name">048-refresh</div>
                <div class="code-name">#icon--refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--random"></use>
                </svg>
                <div class="name">047-random</div>
                <div class="code-name">#icon--random</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--target"></use>
                </svg>
                <div class="name">051-target</div>
                <div class="code-name">#icon--target</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--cloud"></use>
                </svg>
                <div class="name">053-cloud</div>
                <div class="code-name">#icon--cloud</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--minimize"></use>
                </svg>
                <div class="name">050-minimize</div>
                <div class="code-name">#icon--minimize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--cloud-computing-"></use>
                </svg>
                <div class="name">055-cloud-computing-</div>
                <div class="code-name">#icon--cloud-computing-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--cloud-computing"></use>
                </svg>
                <div class="name">054-cloud-computing</div>
                <div class="code-name">#icon--cloud-computing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--play"></use>
                </svg>
                <div class="name">058-play</div>
                <div class="code-name">#icon--play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--stop"></use>
                </svg>
                <div class="name">059-stop</div>
                <div class="code-name">#icon--stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--right-arrow"></use>
                </svg>
                <div class="name">057-right-arrow</div>
                <div class="code-name">#icon--right-arrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--pause"></use>
                </svg>
                <div class="name">060-pause</div>
                <div class="code-name">#icon--pause</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--document"></use>
                </svg>
                <div class="name">070-document</div>
                <div class="code-name">#icon--document</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--wall-clock"></use>
                </svg>
                <div class="name">068-wall-clock</div>
                <div class="code-name">#icon--wall-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--file"></use>
                </svg>
                <div class="name">069-file</div>
                <div class="code-name">#icon--file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--abacus"></use>
                </svg>
                <div class="name">071-abacus</div>
                <div class="code-name">#icon--abacus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--writing"></use>
                </svg>
                <div class="name">073-writing</div>
                <div class="code-name">#icon--writing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--exam"></use>
                </svg>
                <div class="name">076-exam</div>
                <div class="code-name">#icon--exam</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--timetable"></use>
                </svg>
                <div class="name">077-timetable</div>
                <div class="code-name">#icon--timetable</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--invoice"></use>
                </svg>
                <div class="name">072-invoice</div>
                <div class="code-name">#icon--invoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--chat-"></use>
                </svg>
                <div class="name">082-chat-1</div>
                <div class="code-name">#icon--chat-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--contract"></use>
                </svg>
                <div class="name">081-contract</div>
                <div class="code-name">#icon--contract</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--shield"></use>
                </svg>
                <div class="name">083-shield</div>
                <div class="code-name">#icon--shield</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--folder"></use>
                </svg>
                <div class="name">084-folder</div>
                <div class="code-name">#icon--folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--internet-"></use>
                </svg>
                <div class="name">085-internet-1</div>
                <div class="code-name">#icon--internet-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--internet"></use>
                </svg>
                <div class="name">086-internet</div>
                <div class="code-name">#icon--internet</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--email-"></use>
                </svg>
                <div class="name">093-email-4</div>
                <div class="code-name">#icon--email-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--email-1"></use>
                </svg>
                <div class="name">094-email-5</div>
                <div class="code-name">#icon--email-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--spam-"></use>
                </svg>
                <div class="name">092-spam-1</div>
                <div class="code-name">#icon--spam-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--key"></use>
                </svg>
                <div class="name">097-key</div>
                <div class="code-name">#icon--key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--bar-chart"></use>
                </svg>
                <div class="name">098-bar-chart</div>
                <div class="code-name">#icon--bar-chart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--connection"></use>
                </svg>
                <div class="name">100-connection</div>
                <div class="code-name">#icon--connection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--link"></use>
                </svg>
                <div class="name">099-link</div>
                <div class="code-name">#icon--link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon--clip"></use>
                </svg>
                <div class="name">103-clip</div>
                <div class="code-name">#icon--clip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xukezheng"></use>
                </svg>
                <div class="name">许可证</div>
                <div class="code-name">#icon-xukezheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenhe"></use>
                </svg>
                <div class="name">审核</div>
                <div class="code-name">#icon-shenhe</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paizhao"></use>
                </svg>
                <div class="name">拍照</div>
                <div class="code-name">#icon-paizhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhiban"></use>
                </svg>
                <div class="name">值班</div>
                <div class="code-name">#icon-zhiban</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
